<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="jquery-3.5.1.min.js"></script>
    <script src="js/tudolist.js"></script>
</head>
<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" name="title" id="title" placeholder="添加ToDo" required="required" >
        </section>
    </header>
    <section>
        <h2>正在进行<span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成<span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer style="text-align: center;  width: 500px;">
        Copyright &copy; 2020 todolist.cn
    </footer>

    <script>
        var todolist = [{
            title:'我今天吃八个馒头',
            done:false
        },{
            title:'我今天学习jq',
            done:false
        }];
        // localStorage.setItem("todo",todolist);
        //1.本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式JSON.stringify()
        localStorage.setItem("todo",JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        // console.log(typeof data); 
        // console.log(data[0].title); 
        // 2.获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(data[0].title); 


    </script>
</body>
</html>